<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户界面</title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/pagination.js"></script>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/axios.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
		<script type="text/javascript" src="./js/dcalendar.picker.js"></script>
		<script src="./js/validate.js"></script>
			
		<link rel="stylesheet" href="./css/bootstrap.css">
		<link rel="stylesheet" href="./css/dcalendar.picker.css">
	</head>
	<body>
		<div id="app" style="margin-top: 30px;" class="container">
			<div style="text-align: center;">
				<h1>用户页面---{{user.nickname}}</h1>
			</div>
			<button type="button" class="btn btn-success" @click="toShowModel" v-if="user.status==true">去发单</button>
			<button type="button" class="btn btn-success" v-if="user.status==false" @click="jinzhi">去发单</button>
			<button type="button" class="btn btn-success" @click="toMyUser">我的</button>
			<select style="" v-model="seid" @change="selectstatus">
				<option value="0">请选择</option>
				<option value="1">审核中</option>
				<option value="2">未通过</option>
				<option value="3">抢单中</option>
				<option value="4">已取消</option>
				<option value="6">待确认</option>
				<option value="9">待评价</option>
				<option value="8">待付款</option>
			</select>
			<table class="table table-bordered table-striped">
				<tr>
					<th>编号</th>
					<th>订单名称</th>
					<th>图片</th>
					<th>订单状态</th>
					<th>订单金额</th>
					<th>订单详情</th>
					<th >评价</th>
					<th>跑腿员详情</th>
				</tr>
				<tr v-for="l in list">
					<td>{{l.oid}}</td>
					<td>{{l.ordername}}</td>
					<td>
						<img :src="l.orderimage" width="50px" height="50px" />
					</td>
					<td>{{l.name}}</td>
					<td>{{l.amout}}</td>
					<td>{{l.ordertext}}</td>
					<td v-if="l.estimate!=null">{{l.estimate}}</td>
					<td v-if="l.estimate==null">无评价</td>
					<td v-if="l.user!=null">{{l.user.nickname}}---{{l.user.phone}}</td>
					<td v-if="l.user==null">没有接单</td>
					
					<th v-if="l.statusid==2 && l.estimate!=null">
						<button type="button" class="btn btn-success" @click="pingjiapingjia(l.oid)">修改评价</button>
					</th>
					<th v-if="l.statusid==2 && l.estimate==null">
						<button type="button" class="btn btn-success" @click="toShowModel2(l.oid)" v-if="user.status==true">重新提交</button>
					</th>
					<td v-if="l.statusid==3">
						<button type="button" class="btn btn-success" @click="Quxiao(l.oid)">取消</button>
					</td>
					<th v-if="l.statusid==6">
						<button type="button" class="btn btn-success" @click="querenshou(l.oid,l.amout,l.userid,l.ptid)">确认收到</button>
					</th>
					<th v-if="l.statusid==8">
						<button type="button" class="btn btn-success" @click="fukuan(l.oid,l.amout,l.userid,l.ptid)">付款</button>
					</th>
					<th v-if="l.statusid==9">
						<button type="button" class="btn btn-success" @click="pingjiapingjia(l.oid)">评价</button>
					</th>
				</tr>
			</table>
			
			
			
				<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-body">
								<div class="form-group" style="text-align: center;">
									<label>
										<h2>用户发单</h2>
									</label>
								</div>
								<form id="from_sub" action="http://localhost:10010/api/item/upload/image" method="post" enctype="multipart/form-data">
								<div class="form-group">
									<div class="controls">
										<input type="hidden" name="oid" v-model="order.oid" />
									</div>
								</div>
								<div class="form-group">
									<label for="ordername">订单名称</label>
									<div class="controls">
										<input type="hidden" name="userid" v-model="order.userid" />
										<input type="text" class="form-control" id="ordername" name="ordername" v-model="order.ordername">
									</div>
								</div>
								<div class="form-group">
									<label for="file">订单图片</label>
									<div class="">
										<input type="file" id="file" name="file">
										<input type="hidden" id="orderimage" name="orderimage" v-model="order.orderimage">
										<img :src="order.orderimage"  width="100px" height="100px"  v-if="order.orderimage!=null"/>
									</div>
								</div>
								<div class="form-group">
										<label for="amout">订单金额</label>
										<div class="controls">
											<input type="text" class="form-control" id="amout" name="amout" v-model="order.amout" >
										</div>
								</div>
								<div class="form-group">
									<label for="ordertext">订单详情</label>
									<div class="controls">
										<input type="text" class="form-control" id="ordertext" name="ordertext" v-model="order.ordertext"   >
									</div>
								</div>
								<div class="modal-footer">
									<div class="form-group">
										<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary" @click="toAddOrder">提交</button>
									</div>
								</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				
				
				<div id="pingjia" class="modal fade" tabindex="-1" role="dialog">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-body">
								<div class="form-group" style="text-align: center;">
									<label>
										<h2>评价</h2>
									</label>
								</div>
								<div class="form-group">
									<label for="estimate">评价</label>
									<div class="controls">
										<!-- <input type="text" class="form-control" id="estimate" name="estimate" v-model="estimate"> 
										-->
										<textarea rows="7" cols="50" v-model="estimate">
											
										</textarea>
									</div>
								</div>
								<div class="modal-footer">
									<div class="form-group">
										<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary" @click="pingjia">提交</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				estimate:"",
				order:{
					userid:0
				},
				list:[],
				user:{},
				seid:0,
				oid:0,
			},
			methods:{
				getLoginId(){
					var id1=document.URL.split('=')[1];
					this.order.userid=id1;
				},
				jinzhi(){
					alert("你已经被禁止不能发单")
				},
				initMessagePond(){
					axios.get("http://localhost:10010/api/item/fadan/findAllPutongOrder?userid="+this.order.userid).then(function(reponse){
						vue.list=reponse.data;
					});
					axios.post("http://localhost:10010/api/item/user/findUserByuserid?userid="+this.order.userid).then(function(response){
						vue.user=response.data;
					});
					
				},
				toShowModel(){
					$('#myModal').modal("show");
				},
				toShowModel2(id){
					axios.post("http://localhost:10010/api/item/fadan/findOrderBYid?oid="+id).then(function(response){
						vue.order=response.data;
						$('#myModal').modal("show");
					});
				},
				toAddOrder(){
					$("#from_sub").submit()
				},
				toMyUser(){
					// alert(this.order.userid);
					window.location.href="my.html?id="+this.order.userid;
				},
				selectstatus(){
					axios.post("http://localhost:10010/api/item/fadan/selectstatus?userid="+this.order.userid+"&seid="+this.seid).then(function(response){
						vue.list=response.data;
					});
				},
				Quxiao(id){
					axios.post("http://localhost:10010/api/item/fadan/updatestatusidQuxiao?oid="+id).then(function(response){
						$('#myModal').modal("hide");
						axios.post("http://localhost:10010/api/item/fadan/selectstatus?userid="+vue.order.userid+"&seid=4").then(function(response){
							vue.list=response.data;
						});
					});
				},
				querenshou(id,amout,userid,ptid){
					// alert(id+"-"+amout+"_"+ptid+"-"+userid)
					axios.post("http://localhost:10010/api/item/fadan/querenshou?oid="+id+"&auout="+amout+"&userid="+userid+"&ptid="+ptid).then(function(response){
						axios.post("http://localhost:10010/api/item/fadan/selectstatus?userid="+vue.order.userid+"&seid=0").then(function(response){
							vue.list=response.data;
						});
					});
				},
				fukuan(id,amout,userid,ptid){
					// alert(id+"-"+amout+"_"+ptid+"-"+userid)
					axios.post("http://localhost:10010/api/item/fadan/fukuan?oid="+id+"&amout="+amout+"&userid="+userid+"&ptid="+ptid).then(function(response){
						axios.post("http://localhost:10010/api/item/fadan/selectstatus?userid="+vue.order.userid+"&seid=0").then(function(response){
							vue.list=response.data;
						});
					});
				},
				pingjiapingjia(id){
					this.oid=id
					$('#pingjia').modal("show");
				},
				pingjia(){
					// alert(this.oid+"&estimate="+this.estimate)
					axios.post("http://localhost:10010/api/item/fadan/pingjia?oid="+this.oid+"&estimate="+this.estimate).then(function(response){
						axios.post("http://localhost:10010/api/item/fadan/selectstatus?userid="+vue.order.userid+"&seid=0").then(function(response){
							vue.list=response.data;
						});
					});
					$('#pingjia').modal("hide");
				}
			},
			created() {
				this.getLoginId();
				if(this.order.userid!=0){
					this.initMessagePond();
				}else{
					window.location.href="login.html"
				}
				axios.post("http://localhost:10010/api/item/user/findUserByuserid?userid="+this.order.userid).then(function(response){
						if(response.data==""){
							window.location.href="login.html"
						}
				});
				
			},
			
		});
	</script>
</html>
